feat(file-input): Added file input component #1613
Conversation
simeonoff
changed the title
There was a problem hiding this comment.
LGTM, with some minor style suggestions.
The main concern is a UX issue with required file inputs. When a user clicks a required file input, the focus shifts to the browser's file dialog. This triggers the input's blur event, which in turn runs the validation logic. This can lead to immediate validation errors being displayed even before the user has selected a file, which is not ideal. To fix this, please implement an internal boolean flag (e.g., _hasActivation).
Set this flag to true on the input's click event (activation), and reset it to false on the change or cancel events. Then, modify the blur handler to skip validation if _hasActivation is true.
| this.input.value = ''; | ||
| this._formValue.value = this._formValue.defaultValue; | ||
|
|
||
| this.requestUpdate(); | ||
| this._updateValidity(); |
There was a problem hiding this comment.
| this.input.value = ''; | |
| this._formValue.value = this._formValue.defaultValue; | |
| this.requestUpdate(); | |
| this._updateValidity(); | |
| this.input.value = ''; | |
| super._restoreDefaultValue(); |
Wouldn't that do the same thing?
| if (!this.input) return null; | ||
| return this.input.files; |
There was a problem hiding this comment.
Nitpick but it's easier to parse at a glance
| if (!this.input) return null; | |
| return this.input.files; | |
| return this.input?.files ?? null; |
| <input | ||
| id=${this.inputId} | ||
| part=${partNameMap(this.resolvePartNames('input'))} | ||
| name=${ifDefined(this.name)} |
There was a problem hiding this comment.
No need to set a name attribute on the underlying input since it does not participate in form submission
| name=${ifDefined(this.name)} |
| ?multiple=${this.multiple} | ||
| tabindex=${this.tabIndex} | ||
| accept=${ifDefined(this.accept === '' ? undefined : this.accept)} | ||
| aria-invalid=${this.invalid ? 'true' : 'false'} |
There was a problem hiding this comment.
| aria-invalid=${this.invalid ? 'true' : 'false'} | |
| aria-invalid=${this.invalid} |
rkaraivanov
changed the title
Closes #1581